<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物详情页</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>
  <style>
    .container{
        width: 1000px;
        margin:0 auto;
        padding: 0px;
    }
    .current-location{
       display: flex;
       box-sizing: border-box;
       padding: 20px 0px;
    }
    .current-location a{
        color: black;
    }
    .current-location a:hover{
        color: orange;
    }
    .pet-intro{
        display: flex;
        justify-content: space-between;
    }
   .pet-img{
    width:495px;
    height:395px;
  }
  .pet-img img{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
  .pet-information >span{
    box-sizing: border-box;
    background-color:orange ;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 2px;
  }
  .pet-information div:nth-child(2){
    margin-top: 10px;
    padding: 10px 0px;
  
    font-size: 23px;
  }
  .pet-information div:nth-child(3){
    margin-top: 10px;
    padding: 10px 0px;

    font-size: 15px;
  }
  .pet-information div:nth-child(4){
    margin-top: 10px;
    padding: 10px 0px;

    font-size: 30px;
    font-weight: 600;
    color: rgb(198, 35, 35);
  }
  .pet-information div>ul:nth-child(1){
    
    display: flex;
    font-size: 15px;
    padding: 10px 0px;
    height: 15px;
  }
  .pet-information div>ul:nth-child(2){
   
    display: flex;
    font-size: 15px;
    padding: 10px 0px;
    height: 15px;
  }
  .pet-information div>ul>li{
    margin-right: 20px;
  }
  .pet-information div>ul>li:nth-child(1){
    padding-top: 3px;
  }
  .pet-information div>ul>li>img{
     box-sizing: border-box;
     padding-bottom: 5px;
  }
  .pet-information> ul:nth-child(6){
    background-color:gray;
    margin-top: 10px;
    display: flex;
    padding: 20px 0px;
    font-size: 15px;
  }
  .pet-information >ul>li{
    
    margin-right: 10px;
  }
  .vacc>li>span:nth-child(2){
   
    margin-right: 10px;
    font-weight: 600;
    font-size: 20px;
  }
  .pet-btn{
    display: flex;
    padding: 10px 0px;
  }
  .pet-btn>li{
    margin-right: 5px;
  }
  .pet-btn>li>button{
   font-size: 25px;
   padding: 10px 25px;
   border-radius: 3px;
  }
  .pet-btn .btn2{
    background-color:rgb(65, 203, 184);
  }
  .pet-btn .btn1{
    background-color:rgb(220, 133, 62);
  }
  .pet-btn li:nth-child(3) {
  
    display: flex;
    flex-direction:column;
    justify-content: center;
    padding: 0px 5px;
  }
  .pet-btn li:nth-child(4) {
   
    display: flex;
    flex-direction:column;
    justify-content: center;
    padding: 0px 5px;
  }
  .pet-btn li img{
    margin-bottom: 2px;
  }
  /* 商家css */
  .business-infor{
    margin-top: 20px;
    background-color: orange;
    display: flex;
    justify-content: end;
    padding: 20px 0px;
   
  }
 .bus-content{
    background-color: white;
    display: flex;
    justify-content:space-between;
    padding: 20px 0px;
    border-radius:10px 0px 0px 10px;
    position: relative;
 } 
 .bus-intro{
    display: flex;
    margin-right: 150px;
   transform: translateX(-40px);
 }

 .bus-intro div:nth-child(1){
 background-color:aqua;
 width: 80px;
 height: 80px;
 }
 .bus-intro img{
 box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 40px;
 }
 .bus-intro div:nth-child(2){
    padding: 5px 0;
 }
 .bus-intro ul {
    display: flex;
    padding: 10px 0;
 }
 .bus-intro ul>li {
   margin-right: 5px;
   padding: 5px ;
   
 }
 .bus-intro ul>li:nth-child(1) {
    font-size: 20px;   
 }
 .bus-intro ul>li:nth-child(2) span{
    background-color:rgb(78, 224, 129);
    padding: 10px ;
    border-radius: 3px;  
    color: white;
 }
 .bus-intro ul>li:nth-child(3) span{
    background-color:rgb(235, 11, 41);
    padding: 10px ;
    border-radius: 3px;
    color: white;
 }
 .bus-intro ul>li:nth-child(4) span{
    background-color:rgb(208, 99, 59);
    padding: 10px ;
    border-radius: 3px;
    color: white;
 }
 .bus-jump{
    display: flex;
 }
 .bus-jump >ul{
    display: flex;
   align-items: center;
   margin-right: 10px;
 }
 .bus-jump >ul>li{
   margin-right: 10px;
 }
 .bus-jump >div>a{
    background-color: orange;
    color: black;
    padding: 5px;
    border-radius:2px
 }
 .bus-jump >div>img{
    width: 80px;
    height: 80px;
 }
/* 宠物详情页 */
.pet-bread-zong{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.pet-breed{
   
   
}
.breed-first{
    margin-bottom: 20px;
}
.breed-first>span:nth-child(1){
    display: block;
    font-size: 25px;
    margin-bottom: 10px;
}
.breed-first>span:nth-child(2){
  display: block;
   width: 100px;
   height: 5px;
   background-color:orange;
}
.breed-now{
    display: flex;
    background-color: #fffbe9;
    padding: 30px;
    justify-content: space-between;
}
.petbreed-img{
  margin-right: 10px;
}
.petbreed-img>div{
   width: 220px;  
   height: 220px;
  
}
.petbreed-img img{
   width: 100%;  
   height: 100%;
  
  
}
.petbreed-img span{
 font-size: 30px;
 font-weight: 600;
 display: block;
 text-align: center;
 margin-top: 70px;
}
.ul-breed{
    display: flex;
    justify-content: space-between;
}
.ul-first{
 margin-right: 20px;
}
.ul-first>ul{
   
    margin-bottom: 20px;
}
.ul-second>ul{
    
    margin-bottom: 48px;
}
.ul-first>ul>li{
    margin-bottom: 10px;
    font-size: 15px;
    color:rgb(107, 103, 103);
}
.ul-second>ul>li{
    margin-bottom: 10px;
    font-size: 15px;
    color:rgb(107, 103, 103);
}
.ul-first>ul>li>span{ 
    font-size: 14px;
    color: black;
}
.ul-second>ul>li>span{
    font-size: 14px;
    color: black;
}
.ul-first>div>ul{
    margin-bottom: 10px;
}
.ul-second>div>ul{
    margin-bottom: 10px;
}
.ul-first>div>ul>li{
    margin-right: 10px;
}
.ul-second>div>ul>li{
    margin-right: 10px;
}
.ul-first>div>ul>li:nth-child(1){

   color:rgb(107, 103, 103);
   padding-top: 5px ;
}
.ul-second>div>ul>li:nth-child(1){
   
   color:rgb(107, 103, 103);
   padding-top: 5px ;
}
.other-first{
    width: 200px;
    margin-bottom: 20px;
}
.other-second{
    width: 200px;
}
.other-first>ul>li:nth-child(1){
    width: 100%;
    height:100%;
}
.other-first>ul>li>img{
    width: 100%;
    height: 100%;
    margin-bottom:10px;
}

.other-second>ul>li:nth-child(1){
    width: 100%;
    height: 100%;
}
.other-second>ul>li>img{
    width: 100%;
    height: 100%;
    margin-bottom:10px;
}
.other-first>ul>li:nth-child(2){
    margin-bottom:10px;
}
.other-first>ul>li:nth-child(3){
    margin-bottom:10px;
}
.other-first>ul>li:nth-child(2) span{
    font-size: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    color:rgb(107, 103, 103);
}
.other-first>ul>li:nth-child(3) span{
    display: block;
    color:rgb(107, 103, 103);
}
.other-first>ul>li:nth-child(4) span{
    display: block;
    font-size: 30px;
    font-weight: 600;
    color:rgb(205, 34, 34);
}
.other-second>ul>li:nth-child(2){
    margin-bottom:10px;
}
.other-second>ul>li:nth-child(3){
    margin-bottom:10px;
}
.other-second>ul>li:nth-child(2) span{
    font-size: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    color:rgb(107, 103, 103);
}
.other-second>ul>li:nth-child(3) span{
    display: block;
    color:rgb(107, 103, 103);
}
.other-second>ul>li:nth-child(4) span{
    display: block;
    font-size: 30px;
    font-weight: 600;
    color:rgb(205, 34, 34);
}
/* 警告栏 */
.pet-warn{
    display: flex;
    background-color:rgb(234, 85, 75);
    padding: 20px;
    border-radius: 5px;
    margin-top: 10px;
}
.pet-warn-img>div{
  margin-bottom: 5px;
  padding-top: 5px;
}
.pet-warn-img>span{
    color: white;
}
.pet-warn>span{
    display: block;
    width: 1px;
    height: 50px;
    background-color: white;
    margin-left: 20px;
    margin-right: 20px;
}
.pet-warn-content{
    display: flex;
    flex-direction: column;
    padding-top: 5px;
}
.pet-warn-content>span{
    color:white;
}
.pet-warn-content>span:nth-child(1){
    margin-bottom: 10px;
}
/* 具体情况区域 */
.pet-specific-information{
 margin-top: 10px;
}
.pet-specific-information>ul>li{
 margin-top: 15px;
}
.pet-specific-information>ul>li>span:nth-child(1){
    color:rgb(107, 103, 103);
}
/* 你可能感兴趣 */
.pet-interested{
    margin-top: 30px;
}
.pet-interested>div:nth-child(1){
    font-size: 30px;
    margin-bottom: 30px;
}
.pet-interested>div:nth-child(2){
   display: flex;
   
}
.pet-interested button{
  padding: 10px 20px;
  margin-right: 10px;
  display:block ;
  align-items: center;
  background-color: #fff;
  border: 1px solid gray;
  border-radius: 5px;
}
  </style>


<body>
    <div class="shop-content">
        <div class="container">
        <!-- 当前位置导航 -->
          <div class="current-location">
           <div>当前位置：</div>
           <a href="/">首页</a>&gt<a href="/">狗狗商城</a>&gt<a href="/">宠物详情页</a> 
          </div>
          <!-- 宠物详情介绍 -->
          <div class="pet-intro">
            <div class="pet-img">
            <img src="./assets/img/petdog01.jpg" alt="">
           </div>
            <div class="pet-information">
               <span>公狗</span>
               <div>
                <span>已驱虫</span>
                <span>宠物级</span>
                <span>博美犬</span>
               </div>
               <div>【官方推荐】∶16年专注活体销售，完善的购买流 程，良好的售后体系</div>
               <div>¥501.00</div>
               <!-- 配送 -->
               <div>
                <ul>
                    <li>配送：</li>
                    
                    <li><img src="./assets/img/PetDeI02.png" alt="">
                        <span>自提</span>
                        <span>0元</span>
                     </li>
                     <li><img src="./assets/img/PetDeI03.png" alt="">
                        <span>汽运</span>
                        <span>200元</span>
                     </li>
                     <li><img src="./assets/img/PetDeI04.png" alt="">
                        <span>空运</span>
                        <span>500元</span>
                     </li>
                </ul>
                <ul>
                    <li>  服务：</li>
                  
                    <li><img src="./assets/img/PetDeI04.png" alt="">
                        <span>100%实拍</span>
                     </li>
                     <li><img src="./assets/img/PetDeI04.png" alt="">
                        <span>先行赔付</span>
                     </li>
                 
                </ul>
               </div>
               <!-- 疫苗状况 -->
               <ul class="vacc">
                    <li>
                        <span>绝育</span>
                        <span>已绝育</span>
                    </li>
                    <li>
                        <span>疫苗</span>
                        <span>1次</span>
                    </li>
                    <li>
                        <span>驱虫</span>
                        <span>1次</span>
                    </li>
                    <li>
                        <span>年龄</span>
                        <span>9月20天</span>
                    </li>
               </ul>
               <!-- 按钮区 -->
               <ul class="pet-btn">
                <li><button class="btn1">立即购买</button></li>
                <li><button class="btn2">登录练习</button></li>
                <li><img src="./assets/img/PetDeI05.png" alt=""><span>收藏</span></li>  
                <li><img src="./assets/img/PetDeI06.png" alt=""><span>举报</span></li>
               </ul>
            </div>
          </div>
          <!-- 商家信息区 -->
          <div class="business-infor">
            <div class="bus-content">
                <!-- 详细介绍 -->
                <div class="bus-intro">
                     <!-- 头像 -->
                    <div>
                        <img src="./assets/img/head-pic1.png" alt="">
                    </div>
                    <div>
                            <ul>
                                <li>精品精宠</li>
                                <li><span>已交押金</span></li>
                                <li><span>平台认证</span></li>
                                <li><span>实地考察</span></li>
                            </ul>
                            <span>地址：中国重庆市重庆市渝北区嘉洲路</span>
                    </div>
                </div>
                <!-- 商家跳转 -->
                <div class="bus-jump">
                    <!-- 星星评价 -->
                    <ul>
                        <li><img src="./assets/img/star02.png" alt=""></li>
                        <li><img src="./assets/img/star02.png" alt=""></li>
                        <li><img src="./assets/img/star02.png" alt=""></li>
                        <li><img src="./assets/img/star01.png" alt=""></li>
                        <li><img src="./assets/img/star01.png" alt=""></li>
                    </ul>
                    <div>
                        <a href="">进入店铺</a>
                        <!-- 二维码 -->
                        <img src="./assets/img/ftM.jpg" alt="">
                    </div>
                </div>

            </div>
          </div>
          <!-- 品种介绍区 -->
         <div  class="pet-bread-zong">
            <!-- 品种详情 -->
            <div class="pet-breed">
                <div class="breed-first">
                    <span>宠物详情</span> 
                    <span></span>
                </div>
                <div class="breed-now">
                
                    <div class="petbreed-img">
                        <div>
                            <img src="assets/img/dog_10.jpg" alt="">
                        </div>
                        <span>博美犬</span>
                    </div>
                 <div  class="ul-breed">
                    <!-- 详细框1 -->
                   <div class="ul-first">
                     <ul>
                        <li>中文名:&nbsp;&nbsp;<span>博美犬</span></li>
                        <li>别名:&nbsp;&nbsp;<span>博美犬</span></li>
                        <li>原产地:&nbsp;&nbsp;<span>德国波美拉尼亚地区</span></li>
                        <li>小型:&nbsp;&nbsp;<span>小型</span></li>
                     </ul>
                     <div>
                        
                            <ul style="display:flex">
                                <li>粘人程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                        
                       
                            <ul  style="display:flex">
                                <li>掉毛程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                       
                       
                            <ul  style="display:flex">
                                <li>口水程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                        
                       
                            <ul  style="display:flex">
                                <li>喜叫程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                      
                        
                            <ul  style="display:flex">
                                <li>美容程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                       
                     </div>
                   </div> 
                   <!-- 详细框2 -->
                   <div  class="ul-second">
                    
                    <ul>
                        <li>身高:&nbsp;&nbsp;<span>22-28cm</span></li>
                        <li>体重:&nbsp;&nbsp;<span>3.5kg</span></li>
                        <li>寿命:&nbsp;&nbsp;<span>12-15年</span></li>
                       
                     </ul>
                     <div>
                       
                            <ul  style="display:flex">
                                <li>友善程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                       
                       
                            <ul  style="display:flex">
                                <li>体味程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                      
                       
                            <ul  style="display:flex">
                                <li>活跃程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                       
                       
                            <ul  style="display:flex">
                                <li>可训程度:</li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star02.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                                <li><img src="./assets/img/star01.png" alt=""></li>
                            </ul>
                       
                     </div>
                   </div>
                 </div>
                </div>
                <!-- 警告 -->
                <div class="pet-warn">
                    <div class="pet-warn-img">
                        <div>
                            <img src="./assets/img/tanhao.png" alt="">
                        </div>
                        <span>危险</span>
                    </div>
                    <span></span>
                    <div class="pet-warn-content">
                      <span>买家双方私下交易造成自身任何权益损害，所产生的交易纠纷与平台无关。</span>
                      <span> 商家被用户举报，一经证实做永久封号处理，并保留追究造成损失的权利。</span> 
                    </div>
                    
                </div>
                <!-- 具体情况区域 -->
                <div class="pet-specific-information">
                  <ul>
                    <li>
                        <span>编号：</span>
                        <span>5468865653266258622</span>
                    </li>
                    <li>
                        <span>生日：</span>
                        <span>9月24天</span>
                    </li>
                    <li>
                        <span>发布：</span>
                        <span>2021-12-17</span>
                    </li>
                    <li>
                        <span>绝育：</span>
                        <span>是</span>
                    </li>
                    <li>
                        <span>疫苗：</span>
                        <span>1</span>
                    </li>
                    <li>
                        <span>驱虫：</span>
                        <span>1</span>
                    </li>
                    <li>
                        <span>描述：</span>
                        <span></span>
                    </li>
                  </ul>
                </div>
                <!-- 你可能感兴趣 -->
                <div class="pet-interested">
                    <div>你可能感兴趣</div>
                    <div>
                        <button>博美犬价格</button>
                        <button>重庆卖狗的地方</button>
                        <button>重庆在那里买狗不较好</button>
                    </div>
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="pet-others">
                <div class="breed-first">
                    <span>猜你喜欢</span> 
                    <span></span>
                </div>
                <div class="other-first">
                    <ul>
                        <li><img src="./assets/img/petdog02.jpg" alt=""></li>
                        <li><span>已驱虫的宠物级博美犬</span></li>
                        <li><span>【官方推荐】∶16年专注活体销售，完善的购买流 程，良好的售后体系</span></li>
                        <li><span>¥1500.00</span></li>
                    </ul>
                </div>
                <div class="other-second">
                    <ul>
                        <li><img src="./assets/img/petdog02.jpg" alt=""></li>
                        <li><span>已驱虫的宠物级博美犬</span></li>
                        <li><span>【官方推荐】∶16年专注活体销售，完善的购买流 程，良好的售后体系</span></li>
                        <li><span>¥1500.00</span></li>
                    </ul>
                </div>
            </div>
         </div>
        </div>
    </div> 
</body>
</html>